<template>
  <div>
    <div id="link">
      <div class="tablebox">
        <div class="tableTitle">我的发布</div>
        <div id="linkB">
          <el-table :data="releaseInfo" style="width: 100%" stripe>
            <el-table-column
              prop="release_time"
              label="发布时间"
              align="center"
              header-align="center"
            />
            <el-table-column
              prop="trade_type"
              label="交易类型"
              align="center"
              header-align="center"
            />
            <el-table-column
              prop="total_elec"
              label="交易总量/千瓦时"
              align="center"
              header-align="center"
            />
            <el-table-column
              prop="price"
              label="预期价格/分"
              align="center"
              header-align="center"
            />
            <el-table-column
              prop="date"
              label="交易日期"
              align="center"
              header-align="center"
            />
            <el-table-column
              prop="start_time"
              label="开始时间"
              align="center"
              header-align="center"
            />
            <el-table-column
              prop="end_time"
              label="结束时间"
              align="center"
              header-align="center"
            />
            <el-table-column
              prop="trade_state_name"
              label="交易状态"
              align="center"
              header-align="center"
            />
            <el-table-column
              label="操作"
              align="center"
              width="100"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  size="mini"
                  @click="showTimeSlotInfo(scope.row.release_id, 1)"
                  >详情</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="paginationBox">
          <el-pagination
            background
            layout="prev, pager, next"
            @current-change="getReleaseInfoHelp"
            :page-count="pageHelp.pages"
            :page-size="pageHelp.pageSize"
          />
        </div>
      </div>
    </div>
    <!-- 我的发布详情开始 -->
    <el-dialog title="详情" :visible.sync="detaileVisible" width="600px">
      <div id="linkW">
        <el-table :data="detaileData" border style="width: 100%" stripe>
          <el-table-column
            prop="time_slot"
            label="时间槽/时"
            align="center"
            header-align="center"
          />
          <el-table-column
            prop="elec_value"
            label="电量(固定值)"
            align="center"
            header-align="center"
          />
          <el-table-column
            prop="elec_upper"
            label="电量上限"
            align="center"
            header-align="center"
          />
          <el-table-column
            prop="elec_lower"
            label="电量下限"
            align="center"
            header-align="center"
          />
        </el-table>
        <el-pagination
          background
          layout="prev, pager, next"
          @current-change="getReleaseDetail"
          :page-count="detailPageHelp.pages"
          :page-size="detailPageHelp.pageSize"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeDetail"> 知道了</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getTimeSlotInfo } from "../../../api/link";
import { getReleaseInfo } from "../../../api/userCenter";
export default {
  data() {
    return {
      jiaoyidetaileVisible: false,
      detaileVisible: false,
      detailReleaseID: undefined,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      detaileData: [
        { time: "60", guding: "50", shagnxian: "50", xiaxian: "40" },
        { time: "60", guding: "50", shagnxian: "50", xiaxian: "40" },
        { time: "60", guding: "50", shagnxian: "50", xiaxian: "40" },
      ],
      releaseInfo: [],
      pageHelp: {
        pages: 1, // 总页
        pageSize: 10, // 每页显示个数
      },
      detailPageHelp: {
        pages: 1, // 总页
        pageSize: 8, // 每页显示个数
      },
    };
  },
  mounted() {
    this.getReleaseInfoHelp(1);
  },
  methods: {
    onSubmit() {},
    getReleaseInfoHelp(pageNum) {
      if (!localStorage.getItem("Token") || !localStorage.getItem("Name")) {
        return;
      }
      getReleaseInfo(pageNum, this.pageHelp.pageSize).then((res) => {
        // 获取我的发布
        this.pageHelp.pageSize = res.data.pageSize;
        this.pageHelp.pages = res.data.pages;
        this.releaseInfo = res.data.list;
      });
    },
    // 详情
    showTimeSlotInfo(release_id) {
      this.detaileVisible = true;
      this.detailReleaseID = release_id;
      this.getReleaseDetail(1);
    },
    getReleaseDetail(pageNum) {
      getTimeSlotInfo(
        pageNum,
        this.detailPageHelp.pageSize,
        this.detailReleaseID
      ).then((res) => {
        this.detailPageHelp.pageSize = res.data.pageSize;
        this.detailPageHelp.pages = res.data.pages;

        this.detaileData = res.data.list;
      });
    },
    closeDetail() {
      this.detaileVisible = false;
      this.detailReleaseID = undefined;
    },
  },
};
</script>
<style scoped>
</style>
